
<script>
import HomeHeader from '@/views/home/modules/HomeHeader.vue'
import DefaultContent from '@/views/home/modules/DefaultContent.vue'
export default {
    name: 'HomeIndex',
    components: {
        HomeHeader, DefaultContent
    },
    data() {
        return {
            homeTypes: [],
            headerMenus: [
                { name: '控制台', path: '/admin' },
                { name: '登陆', path: '/login' },
                { name: '注册', path: '/register' }
            ],
            pictureUrl: [
                '/img/url1.jpg',
                '/img/url2.jpg',
                '/img/url3.jpg',
            ],
        }
    },
    methods: {
        getRoomTypes() {
            this.$http.get(
                '/roomCategory/lists',
            ).then(res => res.data)
                .then(res => {
                    if (res.code === 0) {
                        res.data.forEach(item => {
                            this.homeTypes.push(item.category)
                        })
                    } else {
                        this.homeTypes = ['单人间', '双人间']
                    }
                })
        },
    },
    mounted() {
        this.getRoomTypes()
    }
}
</script>


<template>
    <el-scrollbar id="home-header" height="100vh">
        <el-container>
            <el-header>
                <HomeHeader :headerMenus="headerMenus" />
            </el-header>
            <el-main>
                <DefaultContent :homeType="homeTypes" :pictureUrl="pictureUrl" />
            </el-main>
        </el-container>
    </el-scrollbar>
</template>


<style scoped lang="scss">
$header-height: 60px;

#home-header {
    position: relative;

    .el-header {
        position: sticky;
        padding: 0;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .el-main {
        padding: 0;
    }

}
</style>